<template>
  <el-card
    v-loading="loading"
    class="card-container maxx-view-height full"
    style="overflow: auto"
  >
    <div class="department-outer">
      <div class="view-box">
        <org-tree-view
          :data="data"
          :horizontal="horizontal"
          :zoom="realZoom"
          collapsable
          @node-contextmenu="openMenu"
          @wheel.native.prevent="wheel"
        />
      </div>
    </div>
    <el-divider></el-divider>
    <el-row> <group-manage /> </el-row>

    <context-menu
      v-model="contextmenu.show"
      :items="contextMenuItems"
      :left="contextmenu.left"
      :top="contextmenu.top"
    />
  </el-card>
</template>

<script>
/**
 * 详情见iview-admin
 * https://admin.iviewui.com/component/org_tree_page
 */
import ContextMenu from 'el-admin-layout/dist/esm/component/ContextMenu'
import OrgTreeView from './components/OrgTreeView.vue'
import GroupManage from './components/GroupManage.vue'

export default {
  name: 'Organization',

  components: {
    OrgTreeView,
    ContextMenu,
    GroupManage
  },

  data: () => ({
    loading: false,
    zoom: 100,
    data: {
      id: 0,
      label: '协和京山医院',
      children: [
        {
          id: 1,
          label: '院领导1'
        },
        {
          id: 2,
          label: '院领导2'
        },
        {
          id: 3,
          label: '院领导3'
        },
        {
          id: 4,
          label: '院领导4'
        },
        {
          id: 5,
          label: '院领导5'
        },
        {
          id: 6,
          label: '院领导6'
        }
      ]
    },
    horizontal: false,
    contextmenu: {
      show: false,
      left: 0,
      top: 0
    }
  }),

  computed: {
    contextMenuItems() {
      return [{ content: '删 除', click: this.del }]
    },

    realZoom() {
      return this.zoom / 100
    }
  },

  methods: {
    del() {
      // function f(data) {
      //   for (let [d, index] of data) {
      //     if (d.id === this.currentNode.id) return data.splice(index, 1)
      //     if (d.children && d.children.length > 0) f(d.children)
      //   }
      // }
      // f(this.data.children)
      this.data.children.forEach((d, i) => {
        if (d.id === this.currentNode.id) this.data.children.splice(i, 1)
      })
      console.log(this.currentNode)
    },

    //右键菜单
    openMenu(e, obj) {
      e.preventDefault()
      this.currentNode = obj
      this.contextmenu.left = e.clientX + 15
      this.contextmenu.top = e.clientY
      if (obj.id !== 0) this.contextmenu.show = true
    },

    //滚轮缩放
    wheel(e) {
      const eventDelta = e.wheelDelta || -(e.detail || 0)
      const zoom = this.zoom + (eventDelta / 12) * 2
      if (zoom >= 20 && zoom <= 200) {
        this.zoom = zoom
      }
    }
  }
}
</script>

<style lang="scss">
.department-outer {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: auto;

  .tooltip-box {
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .view-box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>
